<template>
  <wsPage title="优惠码列表">
    <div slot="page_operate">
      <Button @click="refresh">
        <Icon type="refresh"></Icon><span>刷新</span>
      </Button>
    </div>
    <wsSmPanel
      :page="table.page"
      @simple-query="query"
      @page-change="query"
    >
      <div slot="query_form">
        <Form
          :model="queryForm"
          :label-width="100"
        >
          <FormItem label="状态">
            <!-- <RadioGroup
              v-model="queryForm.status"
              type="button"
              @on-change="queryParamChange"
            >
              <Radio label="0">新增</Radio>
              <Radio label="1">已上线</Radio>
              <Radio label="2">已下线</Radio>
            </RadioGroup> -->
            <RadioGroup
              v-model="queryForm.status"
              type="button"
              size="large"
              @on-change="queryParamChange"
            >
              <Radio
                :label="item.status"
                v-for="(item,index) in navList"
                :key="index"
              >{{item.name}}</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="优惠码">
            <Input
              v-model="queryForm.discountCode"
              placeholder="请输入优惠码"
              placeholder-style="text-align: center; color: black;"
              style="width: 20%;"
            ></Input>
          </FormItem>
          <FormItem label="分销人">
            <Input
              v-model="queryForm.distributor"
              placeholder=""
              style="width: 20%;"
            ></Input>
          </FormItem>
          <FormItem label="有效时间">
            <Row>
              <Col span="2">
              <FormItem>
                <DatePicker
                  type="date"
                  placeholder="开始时间"
                  v-model="queryForm.startDate"
                  @on-change="handlechange"
                ></DatePicker>
              </FormItem>
              </Col>
              <Col
                class="subtract"
                span="1"
              >-</Col>
              <Col span="2">
              <FormItem>
                <DatePicker
                  type="date"
                  placeholder="结束时间"
                  v-model="queryForm.endDate"
                  @on-change="handlechangend"
                ></DatePicker>
              </FormItem>
              </Col>
            </Row>
          </FormItem>
          <FormItem label="发放时间">
            <DatePicker
              type="date"
              placeholder="开始时间"
              v-model="queryForm.paymentDate"
              @on-change="startchange"
            ></DatePicker>
          </FormItem>

        </Form>
      </div>
      <div slot="list_operate">
        <Button @click="showAddModal1">新增兑换码</Button>
      </div>

      <div slot="list_data">
        <ws-table
          :data="table.data"
          style="width: 100%"
        >
          <ws-table-column
            align="center"
            label="优惠码"
            prop="discountCode"
          >
          </ws-table-column>
          <ws-table-column
            align="center"
            label="类型"
          >
          </ws-table-column>
          <ws-table-column
            align="center"
            prop="price"
            label="金额"
          ></ws-table-column>
          <ws-table-column
            align="center"
            label="分销人"
            prop="distributor"
          >
          </ws-table-column>
          <ws-table-column
            align="center"
            label="有效开始时间"
            prop="startDate"
          ></ws-table-column>
          <ws-table-column
            align="center"
            label="有效结束时间"
            prop="endDate"
          ></ws-table-column>
          <ws-table-column
            align="center"
            label="发放时间"
            prop="paymentDate"
          ></ws-table-column>
          <ws-table-column
            align="center"
            label="状态"
            prop="status"
          >
            <template slot-scope="scope">
              <span>{{scope.row.status == 2 ? "已下线": '已上线'}}</span>
            </template>
          </ws-table-column>
          <ws-table-column
            align="center"
            label="操作"
            fixed="right"
          >
            <template slot-scope="scope">
              <Button
                @click="onCoupon(scope.row)"
                type="text"
                size="small"
                v-if="scope.row.status == 2"
              >上线</Button>
              <Button
                type="text"
                size="small"
                v-if="scope.row.status != 2"
                @click="offCoupon(scope.row)"
              >下线</Button>
              <Button
                @click="editCoupon(scope.row)"
                type="text"
                size="small"
              >编辑</Button>
              <Button
                @click="delCoupon(scope.row)"
                type="text"
                size="small"
              >删除</Button>

            </template>
          </ws-table-column>
        </ws-table>
      </div>
    </wsSmPanel>
    <!-- 修改优惠码分类弹框 -->
    <wsModal
      v-model="showPutCodeStatus"
      ok-text="保存"
      title="修改主题分类"
      @on-ok="putCodeSave"
      @on-cancel="putCodeCancel"
    >
      <Form ref="from">
        <FormItem
          label="分销人"
          required
        >
          <Input
            type="text"
            placeholder="请输入..."
            v-model="editParams.distributor"
          />
        </FormItem>
        <FormItem
          label="减免金额"
          required
        >
          <Input
            type="number"
            placeholder="请输入..."
            v-model="editParams.price"
          />
        </FormItem>
        <FormItem  label="开始时间">
          <DatePicker
            type="date"
            placeholder="有效开始时间"
            v-model="editParams.startDate"
            @on-change="handlechange"
          ></DatePicker>
        </FormItem>
        <FormItem  label="截止时间">
          <DatePicker
            type="date"
            placeholder="有效截止时间"
            v-model="editParams.startDate"
            @on-change="handlechange"
          ></DatePicker>
        </FormItem>
        <!-- <FormItem label="主题分类简介" required>
                    <Input type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..." v-model="putTopicCategory.wDesc"/>
                </FormItem>                    -->
      </Form>
    </wsModal>
  </wsPage>
</template>

<script>
import Util from "../../../common/util.js";
import Common from "../../../common/common.js";
import $ from "jquery";

export default {
  data() {
    return {
      showPutCodeStatus: false,
      editParams: {
        id: 0,
        distributor: "", //分销人
        price: "", //金额
        startDate: "", //有效开始时间
        endDate: "" //有效结束时间
      },
      //条件查询
      navList: [
        {
          name: "新增",
          status: 0
        },
        {
          name: "已上线",
          status: 1
        },
        {
          name: "已下线",
          status: 2
        }
      ],
      //条件查询
      queryForm: {
        discountCode: "", //优惠码
        distributor: "", //分销人
        price: "", //金额
        startDate: "", //有效开始时间
        endDate: "", //有效结束时间
        paymentDate: "", //反方时间
        codeType: 0, //优惠码类型
        status: 1 //状态
        // name: "",//分销人
        // code:'',//优惠码
        // status: "1", // 1.已上架  2.已下架 3.全部 4新增
        // createDate: "",//有效期开始时间
        // dealineDate: "",//有效期结束时间
        // startDate:'',//发放时间
        // recieveNum:''
      },
      table: {
        data: [],
        page: {
          total: 0, //总条数
          pageNum: 1, //当前页
          pageSize: 10 //每页显示条数
        }
      }
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    handlechange(date) {
      this.queryForm.startDate = date;
    },
    handlechangend(date) {
      this.queryForm.endDate = date;
    },
    startchange(date) {
      this.queryForm.paymentDate = date;
    },
    init() {
      this.query();
    },
    //修改优惠码
    putCodeSave() {
      let _this = this;
      if(_this.editParams.distributor == ''){
         this.$Message.info('请输入分销人!');
      }else if(_this.editParams.price == ''){
        this.$Message.info('请输入减免金额!');
      }else if(_this.editParams.startDate == ''){
        this.$Message.info('请输入有效开始时间!');
      }else if(_this.editParams.startDate == ''){
        this.$Message.info('请输入有效截止时间!');
      }else{
        let params = {
          id : _this.editParams.id,
          price : _this.editParams.price,
          startDate : _this.editParams.startDate,
          endDate : _this.editParams.endDate,
          distributor : _this.editParams.distributor
        }
        this.axios.put('/ws/ops/discountCode/updateDisCode/' + _this.editParams.id ,_this.editParams).then(response => {
          var res = response.data;
          var resMeta = res.meta;
           _this.$Message.warning(resMeta.message);
          if (0 == resMeta.code) {
            _this.putCodeCancel();
            // _this.buildPageData(res.data);
          } else {
           
          }
        });
      }
    },
    //取消优惠码
    putCodeCancel() {
      this.clear();
      this.showPutCodeStatus = false;
    },
    /**
     * 表单查询
     */
    query() {
      let queryData = this.queryForm;
      let _this = this; ///ws/ops/discountCode/listDiscountCode/{pageSize}/{pageNum}
      this.axios
        .get(
          "/ws/ops/discountCode/listDiscountCode/" +
            this.table.page.pageNum +
            "/" +
            this.table.page.pageSize,
          { params: queryData }
        )
        .then(response => {
          var res = response.data;
          var resMeta = res.meta;
          if (0 == resMeta.code) {
            _this.buildPageData(res.data);
          } else {
            _this.$Message.warning(resMeta.message);
          }
        });
    },

    /**
     * 构建表格数据
     */
    buildPageData(data_) {
      this.table.data = data_.list;
      this.table.page.total = data_.total;
    },
    clear() {
      this.editParams = {
        id: 0,
        distributor: "", //分销人
        price: "", //金额
        startDate: "", //有效开始时间
        endDate: "" ,//有效结束时间
        distributor:''
      };
      this.query();
    },
    //刷新重置查询
    refresh() {
      this.queryForm = {
        discountCode: "", //优惠码
        distributor: "", //分销人
        price: "", //金额
        startDate: "", //有效开始时间
        endDate: "", //有效结束时间
        paymentDate: "", //反方时间
        codeType: 0, //优惠码类型
        status: 1 //状态
      };
      this.table.data = [];
      this.table.page.total = 0;
      this.table.page.pageNum = 1; //当前页
      this.table.page.pageSize = 10; //每页显示条数
      this.query();
    },
    /**
     * 查询切换
     */
    queryParamChange() {
      this.table.data = [];
      this.table.page.total = 0;
      this.table.page.pageNum = 1; //当前页
      this.table.page.pageSize = 10; //页数大小
      this.query();
    },
    /**
     * 打开新增模态框
     */
    showAddModal1() {
      this.$router.push({ name: "ops_discountCode_add" });
    },
    //确认修改
    confirm(row) {},
    //取消修改
    cancel(row) {
      let _this = this;
      let _row = row;
      _this.queryForm = {
        id: 0,
        distributor: "", //分销人
        price: "", //金额
        startDate: "", //有效开始时间
        endDate: "" //有效结束时间
      };
    },
    //修改优惠码
    editCoupon(row) {
      let _this = this;
      let _row = row;
      console.log(this.editParams);
      console.log(row);

      if (this.editParams.id == 0) {
        this.editParams = {
          id: _row.id,
          distributor: _row.distributor,
          price: _row.price,
          startDate: _row.startDate,
          endDate: _row.endDate
        };
        _this.showPutCodeStatus = !_this.showPutCodeStatus;
      }
    },
    //删除优惠码
    delCoupon(row) {
      // console.log(row.status);
      const _this = this;
      this.$confirm({
        title: "操作提示",
        width: 300,
        content: "确认删除该优惠码?",
        onOk: function() {
          _this.axios
            .delete("/ws/ops/discountCode/delDisCode/" + row.id)
            .then(response => {
              var res = response.data;
              var resMeta = res.meta;
              if (0 == resMeta.code) {
                _this.$Message.info("优惠码删除成功");
                _this.clear();
              } else {
                _this.$Message.warning(resMeta.message);
              }
            });
          // _this.closeCoupon(row_.id);
        }
      });
    },
    /**
     * 优惠码下架
     */
    offCoupon(row_) {
      const _this = this;
      this.$confirm({
        title: "操作提示",
        width: 300,
        content: "确认下线该优惠码?",
        onOk: function() {
          _this.closeCoupon(row_.id);
        }
      });
    },
    /**
     * 优惠券下架
     */
    closeCoupon(couponId) {
      let _this = this;
      this.axios
        .put("/ws/ops/discountCode/useDisCode/" + couponId)
        .then(response => {
          var res = response.data;
          var resMeta = res.meta;
          if (0 == resMeta.code) {
            _this.$Message.info("优惠码下线成功");
            _this.clear();
          } else {
            _this.$Message.warning(resMeta.message);
          }
        });
    },
    /**
     * 优惠券上架
     */
    onCoupon(row_) {
      const _this = this;
      this.$confirm({
        title: "操作提示",
        width: 300,
        content: "确认上线该优惠码?",
        onOk: function() {
          _this.openCoupon(row_.id);
        }
      });
    },
    /**
     * 优惠券上架
     */
    openCoupon(couponId) {
      let _this = this;
      this.axios
        .put("/ws/ops/discountCode/goDisCode/" + couponId)
        .then(response => {
          var res = response.data;
          var resMeta = res.meta;
          if (0 == resMeta.code) {
            _this.$Message.info("优惠码上线成功");
            _this.clear();
          } else {
            _this.$Message.warning(resMeta.message);
          }
        });
    }
  }
};
</script>
<style scoped>
.subtract {
  width: 10px;
  margin-left: 5px;
}
.ws-form-select {
  width: 162px;
}
.title-row {
  padding: 10px;
}
.tab-demo {
  margin-bottom: 10px;
}

#preview-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  overflow: auto;
  display: none;
}

#preview-mask .x-layer {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#preview-mask .x-layer .inner-box {
  width: 384px;
  height: 810px;
  position: relative;
  background: url(../../../assets/images/product/iphonex.png) no-repeat;
}

#preview-mask .x-layer .inner-box .close-btn {
  position: absolute;
  top: -15px;
  right: -15px;
  font-size: 20px;
  text-align: center;
  line-height: 26px;
  width: 30px;
  height: 30px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  cursor: pointer;
}

#preview-mask .x-layer .inner-box .layer-content {
  position: absolute;
  border-radius: 40px;
  top: 21px;
  left: 21px;
  width: 338px;
  height: 767px;
  border: 1px solid #999;
  background: #f9f9f9;
  overflow-x: auto;
}

#preview-mask .x-layer .inner-box .detail-more {
  position: absolute;
  border-radius: 40px;
  top: 21px;
  left: 21px;
  width: 338px;
  height: 767px;
  border: 1px solid #999;
  background: #f9f9f9;
}
</style>